<template>
	<view class="container">
		<view class="body">
			<!-- 店铺 -->
			<view class="b-box">
				<view class="card-box">
					<view class="card-box-body card-box-body-cloumn">
						<view class="list-conten" @tap="getLocation">
							<view class="list-con-item list-con-left">
								<uni-icons style="margin-right: 10rpx;" type="star-filled" color="#ff9000" size="18">
								</uni-icons>店铺位置
							</view>
							<view class="list-con-item list-con-right">
								{{chooseAddress}}
								<uni-icons type="arrowright"></uni-icons>
							</view>
						</view>
						<view class="list-conten">
							<view class="list-con-item list-con-left">
								</uni-icons>
								<uni-icons style="margin-right: 10rpx;" type="star-filled" color="#ff9000" size="18">
								</uni-icons>详细地址
							</view>
							<view class="list-con-item list-con-right tbsm">
								<input v-model="model.address" placeholder="店铺详细地址" maxlength="150" />
							</view>
						</view>
						<view class="list-conten">
							<view class="list-con-item list-con-left">
								<uni-icons style="margin-right: 10rpx;" type="star-filled" color="#ff9000" size="18">
								</uni-icons>手机号码
							</view>
							<view class="list-con-item list-con-right tbsm">
								<input type="number" v-model="model.mobile" placeholder="请填写手机号码" maxlength="11" />
							</view>
						</view>

					</view>
				</view>
			</view>

			<!-- 其他 -->
			<view class="b-box">
				<view class="card-box-head u-flex u-col-center">
					基本信息
					<!-- <uni-icons type="arrowright"></uni-icons> -->
				</view>
				<view class="card-box info-box">
					<view class="card-box-body card-box-body-cloumn">
						<view class="list-conten">
							<view class="list-con-item list-con-left">
								<uni-icons style="margin-right: 10rpx;" type="star-filled" color="#ff9000" size="18">
								</uni-icons>店铺名称
							</view>
							<view class="list-con-item list-con-right tbsm">
								<input v-model="model.name" placeholder="请务必填写和外卖平台相同的名称" maxlength="150" />
							</view>
						</view>
						<view class="list-conten" style="height: auto;">
							<view class="list-con-item list-con-left">
								<uni-icons style="margin-right: 10rpx;" type="star-filled" color="#ff9000" size="18">
								</uni-icons>店铺头像
							</view>
							<view class="list-con-item list-con-right tbsm" style="padding: 30rpx 0;">
								<uni-file-picker :auto-upload="false" file-mediatype="image" file-extname="png,jpg,jpeg"
									limit="1" :imageStyles="imageStyles" @select="selectLogo" @delete="deleteLogo">
								</uni-file-picker>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="b-box info-box">
				<view class="card-box">
					<view class="card-box-body card-box-body-cloumn ">
						<view class="list-conten" style="height: auto;">
							<view class="list-con-item list-con-left">
								</uni-icons>
								<uni-icons style="margin-right: 10rpx;" type="star-filled" color="#ff9000" size="18">
								</uni-icons>店铺小程序码
							</view>
							<view class="list-con-item list-con-right tbsm" style="padding: 30rpx 0;">
								<view class=" list-con-right-item">
									<uni-file-picker :auto-upload="false" file-mediatype="image"
										file-extname="png,jpg,jpeg" limit="1" :imageStyles="imageStyles"
										@select="selectQrcode" @delete="deleteQrcode">
									</uni-file-picker>
								</view>
								<!-- <view class="list-con-right-item get-qrcode-tip">怎么获取小程序码<uni-icons type="help-filled"
										color="#ff9000" size="18">
									</uni-icons>
								</view> -->
							</view>
						</view>
						<view class="list-conten" style="height: auto;flex-direction: column;align-items: flex-start;">
							<view class="list-con-item list-con-left">如何获取小程序码</view>
							<view class="list-con-item list-con-right tbsm i-qcode" style="padding: 30rpx 0;">
								<view class="i-img" @tap.stop="lookImg(0)">
									<image mode="widthFix" :src="$IMG_URL+'/imgs/trnall/mt.jpg'"></image>
								</view>
								<view class="i-img" @tap.stop="lookImg(1)">
									<image mode="widthFix" :src="$IMG_URL+'/imgs/trnall/elm.jpg'"></image>
								</view>
							</view>
						</view>
						</view>
							</view>
						</view>
						<view class="b-box info-box">
							<view class="card-box">
								<view class="card-box-body card-box-body-cloumn ">
						<view class="list-conten">
							<view class="list-con-item list-con-left">
								店铺ID
							</view>
							<view class="list-con-item list-con-right tbsm">
								<input v-model="model.wm_shop_id" placeholder="请填写外卖店铺ID" maxlength="150" />
							</view>
						</view>
						<view class="list-conten" style="height: auto;flex-direction: column;align-items: flex-start;">
							<view class="list-con-item list-con-left">如何获取店铺ID</view>
							<view class="list-con-item list-con-right tbsm i-qcode" style="padding: 30rpx 0;">
								<view class="i-img" @tap.stop="lookImg(0)">
									<image mode="widthFix" :src="$IMG_URL+'/imgs/trnall/mt.jpg'"></image>
								</view>
								<view class="i-img" @tap.stop="lookImg(1)">
									<image mode="widthFix" :src="$IMG_URL+'/imgs/trnall/elm.jpg'"></image>
								</view>
							</view>
						</view>
					</view>
				</view>
				<view class="footer-tip">
					<view class="card-box-body card-box-body-cloumn" style="margin-top: 20rpx;">
						<view class="list-conten" style="height: auto;">
							<view @tap.stop="testJump()" class="list-con-item list-con-left">
								<text v-if="model.shop_type == 1" class="test-jump">测试跳转美团</text>
								<text v-else-if="model.shop_type == 2" class="test-jump test-jump-elm">测试跳转饿了么</text>
								<text v-else class="test-jump test-jump-jd">测试跳转京东</text>
							</view>
							<view class="list-con-item list-con-right tbsm" style="padding: 30rpx 0;">
								<!-- <view class="list-con-right-item get-qrcode-tip">怎么获取店铺ID<uni-icons type="help-filled"
										color="#ff9000" size="18">
									</uni-icons>
								</view> -->
							</view>
						</view>
						<view class="list-conten" style="height: auto;">
							<view class="list-con-item list-con-left tip-box" style="width: 100%;">
								<text class="tip-text">1：请保持信息和外卖平台一致，否则客户可能无法找到您的店铺！</text>
								<text class="tip-text">2：其他问题问客服</text>
							</view>
							<!-- <view class="list-con-item list-con-right tbsm" style="padding: 30rpx 0;">
								<view class="list-con-right-item get-qrcode-tip">怎么获取店铺ID<uni-icons type="help-filled"
										color="#ff9000" size="18">
									</uni-icons>
								</view>
							</view> -->
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="sub">
			<button v-if="!addSuccess" :loading="requestIng" :disabled="requestIng" @tap.stop="apply">申请入驻</button>
			<button v-else style="background: #eee;">提交成功</button>
		</view>
	</view>
</template>

<script>
	import {
		mapMutations,
		mapActions,
		mapState,
		mapGetters
	} from 'vuex';
	import config from '@/common/config.js'
	export default {
		data() {
			return {
				model: {
					shop_type: 1, //1:美团,2:饿了么,3:京东
					logo: null,
					qrcode: null,
					category_id: 0,
					latitude: 0.00,
					longitude: 0.00,
					name: '',
					mobile: '',
					address: '',
					wm_shop_id: ''
				},
				categoryIndex: -1,
				requestIng: false,
				chooseAddress: '请选择您的店铺位置',
				imageStyles: {
					width: 64,
					height: 64,
					background: '#ff9000',
					backgroundColor: '#ff9000',
					color: '#ff9000',
					border: false,
					/* border: {
						radius: '50%'
					} */
				},
				addSuccess: false
			}
		},
		computed: {
			...mapGetters(['userInfo', 'shopCategory'])
		},
		onLoad(e) {
			this.model.shop_type = e.shop_type
		},
		methods: {
			//获取店铺位置
			async getLocation() {
				let that = this;
				// let authState = await new Auth('userLocation').check();
				// authState &&
				uni.chooseLocation({
					success: res => {
						console.log('选择地址', res)
						that.model.latitude = res.latitude;
						that.model.longitude = res.longitude;
						// that.model.name = res.name;
						that.model.address = res.address;
						that.chooseAddress = res.name;
					},
					fail: err => {
						console.log(err);
					}
				});
			},
			selectShopCategory(e) {
				this.categoryIndex = e.detail.value
				this.model.category_id = this.shopCategory[this.categoryIndex].id
			},

			lookImg(index) {
				let that = this;
				uni.previewImage({
					current: index,
					urls: [that.$IMG_URL + '/imgs/trnall/mt.jpg', that.$IMG_URL + '/imgs/trnall/elm.jpg'],
					longPressActions: {
						itemList: ['发送给朋友', '保存图片', '收藏'],
						success: function(data) {
							console.log('选中了第' + (data.tapIndex + 1) + '个按钮,第' + (data.index + 1) + '张图片');
						},
						fail: function(err) {
							console.log(err.errMsg);
						}
					}
				});
			},

			// 获取上传状态
			selectLogo(e) {
				console.log('选择文件：', e)
				// this.$refs.files.upload()
				this.uploadImge(e.tempFilePaths, 'logo')
			},
			deleteLogo(e) {
				console.log('删除文件：', e)
				this.model.logo = null
			},
			selectQrcode(e) {
				this.uploadImge(e.tempFilePaths, 'qrcode')
			},
			deleteQrcode(e) {
				console.log('删除文件：', e)
				this.model.qrcode = null
			},
			uploadImge(tempFilePaths, type) {
				console.log('uploadImge' + this.chooseAddress + '/index/upload', tempFilePaths)
				let that = this;
				!that.requestIng && ((that.$util.loading('上传中'), that.requestIng = true),
					uni.uploadFile({
						url: that.$BASE_URL + '/api/index/upload', //仅为示例，非真实的接口地址
						filePath: tempFilePaths[0],
						name: 'file',
						formData: {
							'user': 'test'
						},
						success: res => {
							let data = JSON.parse(res.data)
							console.log('上传成功', res, res.statusCode, data.code);
							if (res.statusCode == 200 && data.code == '1') {
								that.$util.msg(data.msg || '上传成功');
								that.model[type] = data.data.url
							} else {
								that.$util.msg(data.msg || '上传失败');
							}
						},
						fail: err => {
							that.$util.msg(data.msg || '上传失败1');
						},
						complete: com => {
							that.requestIng = false
							uni.hideLoading()
						}
					}))
			},
			apply() {
				let that = this;
				/* if (that.xieyiStatus != 1) {
					that.$util.msg('请确认协议')
					return
				}; */
				if (that.addSuccess) return;
				!that.requestIng && ((that.$util.loading('提交中'), that.requestIng = true),
					that.$http('user.apply', that.model).then(res => {
						console.log('申请入驻返回值', res)
						uni.hideLoading()
						if (res.code == 1) {
							that.requestIng = false;
							that.addSuccess = true;
							that.$util.msg(res.msg || '提交成功');
							setTimeout(function() {
								that.$store.dispatch('getShopList');
								uni.navigateBack({
									delta: 2
								})
							}, 1500)
						} else {
							that.requestIng = false
							that.$util.msg(res.msg || '提交失败');
						}
					})
					.catch(err => {
						that.requestIng = false
						uni.hideLoading()
					}))
			},
			changeXiYi() {
				this.xieyiStatus = Math.abs(this.xieyiStatus - 1)
			},
			goXieYi() {
				this.$util.jump('/pages/article/article-detail?id=12')
			},
			testJump() {
				let that = this;
				if (!!this.model.wm_shop_id) {
					let appid = config.USER_APPID;
					let path = 'packages/restaurant/restaurant/restaurant?cat_id=0&poi_id=' + this.model.wm_shop_id;
					if (this.model.shop_type == 2) {
						appid = config.USER_APPID;
						path = 'ele-estore/ele-takeout-index/ele-takeout-index?shopId=' + this.model.wm_shop_id;
					} else if (this.model.shop_type == 3) {
						appid = config.USER_APPID;
						path = 'packages/restaurant/restaurant/restaurant?cat_id=0&poi_id=' + this.model.wm_shop_id;
					}
					this.$util.goToMiniProgram(appid, path);
				} else {
					that.$util.msg('请先填写店铺ID');
				}
			}
		},
		onPullDownRefresh() {
			console.log('onPullDownRefresh')
			setTimeout(function() {
				uni.stopPullDownRefresh()
				console.log('stopPullDownRefresh')
			}, 1000)
		}
	}
</script>

<style lang="scss">
	@import '../../common/style/city.css';

	.container {
		background: #eee;
		min-height: 100vh;

		.body {
			margin: 30rpx 0 180rpx;
			margin-bottom: calc(constant(safe-area-inset-bottom) + 150rpx);
			padding-bottom: calc(env(safe-area-inset-bottom) + 150rpx);

			.b-box {
				margin-top: 30rpx;
			}
		}

		.card-box-head {
			color: #222;
			font-size: 32rpx;
			display: flex;
			justify-content: space-between;
			width: 90%;
			margin-left: 5%;
			height: 50rpx;
			align-items: center;
			margin-bottom: 20rpx;
			font-weight: 700;
		}

		.card-box {
			width: 90%;
			min-height: 100rpx;
			margin: 0 5%;
			background: #FFF;
			background-size: 100% 100%;
			box-shadow: 0px 7rpx 11rpx 2rpx rgba(213, 175, 97, 0.34);
			border-radius: 30rpx;
			overflow: hidden;
			position: relative;
			z-index: 1;




			&-body {
				width: 90%;
				margin: 0 5%;
				display: flex;

				.card-box-body-picker {
					width: 100%;
					height: 100%;
				}

				.cb-wallet-item {
					display: flex;
					flex-direction: column;
					flex: 1;

					.cb-wallet-item-num {
						font-size: 40rpx;
						font-weight: 700;
					}

					.cb-wallet-item-tip {
						font-size: 28rpx;
					}
				}
			}

			&-body-cloumn {
				display: flex;
				flex-direction: column;
				align-items: center;
				font-size: 28rpx;

				.no-shop-tip {
					color: #888;
					margin-bottom: 20rpx;
				}

				button {
					color: #ff9000;
					background: #fff;
					border: 1px solid #ff9000;
					border-radius: 37px;
					height: 74rpx;
					line-height: 74rpx;
					width: 180rpx;
					font-size: 28rpx;
				}

				.list-conten {
					display: flex;
					justify-content: space-between;
					width: 100%;
					height: 100rpx;
					align-items: center;
					font-size: 28rpx;
					color: #888;

					.list-con-item {
						display: flex;
						align-items: center;
						font-size: 28rpx;
						font-weight: 500;
						color: #666;
					}

					.list-con-active {
						color: #ff9000;

					}

					.list-con-left {}

					.list-con-right {
						// color: #bbb;
						color: #666;
						font-size: 24rpx;
						font-weight: 400;

						.list-con-right-item {
							// flex: 1;

						}

						.get-qrcode-tip {
							flex: 1;
							display: flex;
							align-items: center;
							justify-content: flex-end;
							height: 60rpx;
							color: #FF9000;
							font-size: 22rpx;
						}
					}

					.tbsm {
						width: 70%;
						height: 80%;

						input {
							width: 100%;
							background: #fff;
							height: 80%;
							text-align: right;
						}
					}

					.i-qcode {
						width: 100%;
						box-sizing: border-box;

						.i-img {
							flex: 1;
							padding: 10rpx;

							image {
								width: 100%;
							}
						}
					}

					.tip-box {

						display: flex;
						flex-direction: column;
						justify-content: center;
						align-items: flex-start;

						.tip-text {
							font-size: 22rpx;
							// color: #666;
							// color: #FF9000;
							color: #333;
							line-height: 30rpx;
							margin-bottom: 10rpx;
						}

					}
				}
			}

			.recharge {
				height: 60rpx;
				line-height: 60rpx;

				font-weight: 600;
				font-size: 34rpx;
				color: #ff9000;
				text-align: center;

			}
		}

		.footer-tip {
			.list-conten {
				width: 90%;
				margin: auto;

				.list-con-item {
					.test-jump {
						font-size: 22rpx;
						text-align: center;
						color: #fff;
						background: #ff9000;
						padding: 4rpx 10rpx;
						min-width: 150rpx;
						border-radius: 5px;
					}

					.test-jump-elm {
						background: rgb(0, 123, 242);
						min-width: 200rpx;
					}

					.test-jump-jd {
						background: rgb(255, 192, 0);
						min-width: 200rpx;
					}
				}
			}
		}

		.b-box .card-box-xieyi {
			font-size: 28rpx;
			font-weight: 400;
			justify-content: flex-start;

			.xieyi {
				margin-left: 10rpx;
			}

			text {
				color: #ff9000;
			}
		}
	}



	.sub {
		position: fixed;
		z-index: 2;
		background: #fff;
		height: 80rpx;
		/* #ifdef H5 */
		left: var(--window-left);
		right: var(--window-right);
		bottom: var(--window-bottom);
		/* #endif */
		/* #ifndef H5 */
		left: 0;
		right: 0;
		bottom: 0;
		/* #endif */
		/* padding: 10rpx 0;
		padding-bottom: constant(safe-area-inset-bottom);
		padding-bottom: env(safe-area-inset-bottom); */
		padding: 20rpx 0;
		padding-bottom: calc(constant(safe-area-inset-bottom) + 20rpx);
		padding-bottom: calc(env(safe-area-inset-bottom) + 20rpx);

		button {
			height: 100%;
			margin: 0 10%;
			border: none;
			background: #ff9000;
			border-radius: 80rpx;
			color: #fff;
		}
	}

	.info-box {
		.list-con-left {
			width: 40%;
		}

		.tbsm {
			width: 60%;
		}
	}

	.uni-popup__wrapper {
		border-radius: 10px;
	}
</style>
